<template>
	<el-dialog
		v-model="user.isLoginDialog"
		:close-on-press-escape="false"
		:close-on-click-modal="false"
		draggable
		:show-close="false"
		title="登录/注册"
		width="380"
		center
	>

		<!-- 登录表单 -->
		<el-row v-if="state.isActive">
			<el-col :span="24">
				<el-form
					label-position="top"
					label-width="auto"
					:model="state.loginForm"
					:rules="loginRules"
					ref="loginFormRef"
				>
					<el-form-item label="账号：" prop="username">
						<el-input v-model="state.loginForm.username" placeholder="请输入账号"/>
					</el-form-item>
					<el-form-item label="密码：" prop="password">
						<el-input v-model="state.loginForm.password" placeholder="请输入密码" type="password" show-password/>
					</el-form-item>
				</el-form>
				<el-link type="primary" style="font-size: 12px" @click="state.isActive = false">没有账号？我要注册？</el-link>
			</el-col>
		</el-row>
		<!-- 注册表单 -->
		<el-row v-else>
			<el-col :span="24">
				<el-form
					label-position="top"
					label-width="auto"
					:model="state.registerForm"
					:rules="registerRules"
					ref="registerFormRef"
				>
					<el-form-item label="账号：" prop="username">
						<el-input v-model="state.registerForm.username" placeholder="请输入账号"/>
					</el-form-item>
					<el-form-item label="密码：" prop="password">
						<el-input v-model="state.registerForm.password" placeholder="请输入密码" type="password" show-password/>
					</el-form-item>
					<el-form-item label="确认密码：" prop="confirmPassword">
						<el-input v-model="state.registerForm.confirmPassword" placeholder="请再次输入密码" type="password" show-password/>
					</el-form-item>
				</el-form>
				<el-link type="primary" style="font-size: 12px" @click="state.isActive = true">已有账号？我要登录？</el-link>
			</el-col>
		</el-row>
		<!-- 底部按钮 -->
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="handleSubmit">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { userStore } from '~/stores/userStore'
import { loginRequest, registerRequest } from '~/api/mock'
const user = userStore()
const state = reactive(<any>{
	isActive: true,  // 控制登录和注册切换
	loginForm: {
		username: 'admin',
		password: 'admin'
	},
	registerForm: {
		username: '',
		password: '',
		confirmPassword: ''
	},
	valid: true
})
const loginFormRef = ref(null)
const registerFormRef = ref(null)
const handleSubmit = () => {
	// 如果在登录状态，验证登录表单
	if (state.isActive) {
		loginFormRef.value.validate((valid: boolean) => {
			if (valid) {
				// 例如调用API进行登录
				http.post("api/login", state.loginForm).then(res =>{
					user.isLogin = true
					user.isLoginDialog = false
					user.userInfo = res.data
					toast.success("登录成功")
					state.loginForm = {}
				})
			} else {
				console.log('登录表单验证失败')
				return false
			}
		})
	} else {
		// 如果在注册状态，验证注册表单
		registerFormRef.value.validate((valid: boolean) => {
			if (valid) {
				// 执行注册逻辑
				http.post("api/register", state.registerForm).then(res =>{
					user.isLogin = true
					user.isLoginDialog = false
					user.userInfo = res.data
					state.isActive = true
					toast.success("注册成功")
					state.registerForm = {}
				})
			} else {
				console.log('注册表单验证失败')
				return false
			}
		})
	}
}
// 登录表单的校验规则
const loginRules = {
	username: [
		{ required: true, message: '请输入账号', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 5, message: '密码至少需要5个字符', trigger: 'blur' }
	]
}
// 注册表单的校验规则
const registerRules = {
	username: [
		{ required: true, message: '请输入账号', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 5, message: '密码至少需要5个字符', trigger: 'blur' }
	],
	confirmPassword: [
		{ required: true, message: '请再次输入密码', trigger: 'blur' },
		{
			validator: (rule: any, value: string, callback: any) => {
				if (value === '') {
					callback(new Error('请再次输入密码'))
				} else if (value !== state.registerForm.password) {
					callback(new Error('两次输入密码不一致'))
				} else {
					callback()
				}
			},
			trigger: 'blur'
		}
	]
}
</script>
<style scoped>
:deep(.el-button) {
	width: 100%;
}
</style>
